{% include "data/template-ui.html" %}
<link rel="stylesheet" type="text/css" href="/static/css/datatables/foundation.min.css" />
<link rel="stylesheet" type="text/css" href="/static/css/datatables/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" type="text/css" href="/static/css/icons.css" />
<link rel="stylesheet" type="text/css" href="/static/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/static/css/rule_list.css" />
<link rel="stylesheet" type="text/css" href="/static/css/sweetalert.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap-select.min.css">

<style>
	.container-fluid, .container-fluid .col-12, .container-fluid .card {
		height: 100%;
	}
	.container-fluid .col-12 {
		padding: 15px;
	}
	.container-fluid .card {
		margin: 0;
	}

	.bootstrap-select>.btn {
		padding: 0 25px 0 12px;
	}
	.bootstrap-select.btn-group .dropdown-menu li {
		padding: 0;
	}
	.bootstrap-select.btn-group .dropdown-menu li a {
		cursor: pointer;
	}
	.dropdown-menu ul {
		display: block;
	}
	.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
		color: #262626;
		text-decoration: none;
		background-color: #f5f5f5;
	}
	.dropdown-menu > li > a {
		border-radius: 3px;
		color: inherit;
		line-height: 25px;
		margin: 4px;
		text-align: left;
		font-weight: normal;
	}
	.dropdown-menu>li>a {
		display: block;
		padding: 3px 20px;
		clear: both;
		font-weight: 400;
		line-height: 1.42857143;
		color: #333;
		white-space: nowrap;
	}
	.dropdown-menu .selected a {
		border: 2px solid #000;
	}
</style>
	<!-- 正文 -->
	<div class="container-fluid animated fadeInUp">
		<div class="col-12" style="padding-top: 15px;">
			<div class="card" style="margin-top: 0;">
				<div class="card-title">
					<div class="row" style="padding:0px !important;">
						<div class="col-md-10">
							<h4 class="text-primary">{{ source_system }}公司-检核规则库</h4>
						</div>
						<div class="col-md-2 pull-right">
							<a href="javascript:void(0)" onclick="addRule()"
								class="btn btn-primary btn-xs p310"><i class="im-plus"></i> 添加规则</a>
							<button id="tb-refresh" href="#" class="btn btn-primary btn-xs p1010"><i
									class="im-spinner2 fa-spin"></i> 刷新</button>
						</div>
					</div>
				</div>

				<div class="card-content">
					<div class="col-lg-3">
						<select class="selectpicker" onchange="fun_option(this.value);">
							<!--<option>是否风险集市</option>-->
                            <option value="">显示全部</option>
							<option value="是">是</option>
							<option value="否">否</option>
						</select>
					</div>

					<table id="example" class="table table-bordered" cellspacing="0" width="100%">
						<thead>
							<tr>
								<th>规则名称</th>
								<th>目标表</th>
								<th>数据标准</th>
								<th>是否风险集市</th>
								<th>问题分类</th>
								<th>源系统数据库</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>

	<script src="/static/js/sweetalert.min.js"></script>
	<script src="/static/js/bootstrap-select.min.js"></script>
	<script type="text/javascript" src="/static/js/DataTables/DataTables-1.10.18/js/jquery.dataTables.js"></script>
	<script type="text/javascript" src="/static/js/DataTables/DataTables-1.10.18/js/dataTables.bootstrap.js"></script>
	<script type="text/javascript">
		function fun_option(val) { //下拉框触发事件
			// document.location.href = "../check/rule?company={{ source_system }}&risk_market=" + val;
			renderTable({refresh: true, risk_market_filter: val});
		}

		function fun_status(id) { //下拉框触发事件
			var status = $(`#${id}`);
			$.ajax({
				type: "POST",
				url: "../../api/check/rule/status_modify",
				data: {
					id: id,
					status: status.attr('value'),
					company: "{{ source_system }}",
				},
				success: function (data) {
					if (data.code === 1000) {
						if (status.attr('value') === '已启用') {
							status.html('已停用');
							status.attr('value', '已停用');
							status.css('color', '#e33734');
						} else {
							status.html('已启用');
							status.attr('value', '已启用');
							status.css('color', '#429e47');
						}
					}
				},
				error: function (e) {
					console.log(e);
					swal({
						title: '更新失败！',
						icon: "error",
					});
				}
			})
		}

		function renderTable(obj) {
			var table = $('#example').DataTable({
				destroy: obj.refresh,
				"ajax": {
					"url": "../../api/check/rule",
					"type": "GET",
					"data": function (d) {
						return $.extend({}, d, {
							name: "{{ source_system }}",
							risk_market_filter: obj.risk_market_filter || ''
							// risk_market_filter: "{{ risk_market_filter }}",
						});
					}
				},
				//"ajax": "/static/resource/objects2.txt",
				"columns": [
					{
						"data": "note"
					},
					{
						"data": 'target_table'
					},
					{
						"data": "check_item"
					},
					{
						"data": "risk_market_item"
					},
					{
						"data": "problem_type"
					},
					{
						"data": "db"
					},
					{
						"data": "status"
					}
				],

				"columnDefs": [{
					// 定义操作列,######以下是重点########
					"targets": 7,
					//操作按钮目标列
					"data": null,
					"render": function (data, type, row) {
						var html = `
							<div>
								<a href='javascript:void(0)' onclick="editRule(${row.id}, '${row.source_system}')"
									style='margin-right:5px;border-bottom: 1px dotted;'>编辑</a>
								<a href='javascript:void(0)' onclick="deleteRule(${row.id}, '${row.source_system}')"
									style='margin-right:5px;border-bottom: 1px dotted;'>删除</a>
							</div>
						`;
						return html;
					}
				}, {
						"targets": 6,
						"data": "status",
						"render": function (data, type, row) {
							if (data == '已启用') {
								var html = `<a id="${row.id}" value="${row.status}" href="javascript:void(0);"
											onclick="fun_status(${row.id})"
											style="color:#429e47;border-bottom: 1px dotted;">${data}</a>`;
								return html;
							} else {
								var html = `<a id="${row.id}" value="${row.status}" href="javascript:void(0);"
											onclick="fun_status(${row.id})"
											style="color:#e33734;border-bottom: 1px dotted;">${data}</a>`;
								return html;
							}
						}
					},
				],

				"pagingType": "full_numbers",
				"sLoadingRecords": "正在加载数据...",
				"sZeroRecords": "暂无数据",
				stateSave: true,
				"searching": true,
				"ordering": true,
				//"dom":'frtilp',
				"dom": 'frt<"row"<"col-md-3"l><"col-md-3"i><"col-md-6 pull-right"p>>',

				//汉化
				"language": {
					"processing": "玩命加载中...",
					"lengthMenu": "显示 _MENU_ 项结果",
					"zeroRecords": "没有匹配结果",
					"info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
					"infoEmpty": "显示第 0 至 0 项结果，共 0 项",
					"infoFiltered": "(由 _MAX_ 项结果过滤)",
					"infoPostFix": "",
					"url": "",
					"paginate": {
						"first": "首页",
						"previous": "上一页",
						"next": "下一页",
						"last": "末页"
					},
					"sSearch": "搜索:",
				},
			});
		}

		function addRule() {
			modal.dialog({
				title: "新建",
				url: "../check/rule/edit?company={{ source_system }}&id=null",
				style: 'width: 100%; height: 100%; margin: 0'
			});
		}

		function editRule(ruleId, source_system) {
			modal.dialog({
				title: "编辑",
				url: `../check/rule/edit?id=${ruleId}&company=${source_system}&username=` + "{{ username }}",
				style: 'width: 100%; height: 100%; margin: 0'
			});
		}

		function deleteRule(ruleId, source_system) {
			swal({
				title: "操作确认",
				text: "删除后，您将无法恢复此文件！",
				icon: "warning",
				cancelButtonText: '确定',
				buttons: {
					cancel: {
						text: "取消",
						visible: true,
					},
					confirm: {
						text: "确定",
					}
				},
				dangerMode: true,
			}).then(e => {
				if (e) {
					$.ajax({
						type: "POST",
						url: "../../api/check/rule/delete",
						contentType: 'application/json',
						data: JSON.stringify({id: ruleId, source_system: source_system}),
						success: function (data) {
							if (data.stat == 200) {
								renderTable({refresh: true});
							} else {
								swal({
									title: '删除失败！',
									text: data.msg,
									icon: "error",
								});
							}
						},
						error: function (e) {
							console.error(e);
						}
					})
				}
			});
		}

		// 弹窗中的iframe调用关闭父页面的弹窗
		function hideModal() {
			$('.modal').modal('hide');
		}

		$(document).ready(function () {
			renderTable({refresh: false});
			$("#tb-refresh").on("click", function () { //刷新页面按钮
				renderTable({refresh: true});
			});
		});
	</script>

	</body>

	</html>